<template>
    <div class="big">
        <!-- 导航栏 -->
        <div class="navigation">
            <div class="icon" @click="back">
                <img src="../../assets/home-img/返回1.png" alt="">
            </div>
            <h2 class="title">{{ hospitalList.hospital }}</h2>
            <div class="icon">
                <img src="../../assets/home-img/分享1.png" alt="">
            </div>
        </div>
        <main>
            <!-- 个人信息 -->
            <div class="information">
                <img class="picture" :src="doctorList.avatar" alt="">
                <div class="name">
                    <h3>{{ doctorList.name }} <span>{{ doctorList.position }}</span><span>神经外科中心</span> </h3>
                    <p>{{ hospitalList.hospital }}</p>
                    <div class="strong">
                        <i style="font-weight: bold; color: #18bb8c;">专业擅长</i>&nbsp;
                        <p>
                            {{ doctorList.strong }}
                        </p>
                    </div>
                    <!-- 官方认证 -->
                    <div class="official">
                        <span>
                            <img src="../../assets/home-img/官方认证.png" alt="">
                            官方号源
                        </span>
                        <span>
                            <img src="../../assets/home-img/官方认证.png" alt="">
                            医生本人
                        </span>
                        <span>
                            <img src="../../assets/home-img/官方认证.png" alt="">
                            平台认证
                        </span>
                        <span>
                            <img src="../../assets/home-img/官方认证.png" alt="">
                            诊前退款
                        </span>
                    </div>
                </div>
            </div>
            <!-- 出诊地 -->
            <div class="outpatient">
                <div class="outpatient-t">
                    <div class="left">出诊地一</div>
                    <div class="right">
                        <h2>{{ hospitalList.hospital }} <span> > </span> </h2>
                        <p>
                            <span>三级乙等</span>
                            <span>公立</span>
                        </p>
                    </div>
                </div>
                <div class="outpatient-m">
                    <h4>神经外科中心</h4>
                    <div class="free">
                        <div class="free-l">
                            近四周
                        </div>
                        <div class="free-r">
                            <div>
                                <h5>{{ time1 }} <span>周一</span> <span>上午</span> </h5>
                                <p>
                                    普通: <span style="color: red;">80元</span>
                                </p>
                            </div>
                            <div>
                                <h5>{{ time2 }} <span>周三</span> <span>下午</span> </h5>
                                <p>
                                    普通: <span style="color: red;">80元</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="prompt">
                    *以上号源由圆心健康专业认证
                </div>
            </div>
        </main>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import http from '../../http/http';

const route = useRoute();
const router = useRouter();
const doctorList = ref([]);
const hospitalList = ref([]);
const time1 = ref();
const time2 = ref();

const doctorId = route.query.id;
const hospitalId = localStorage.getItem('hospitalID');

const getDoctorList = async () => {
    await http.get(`/registration?id=${hospitalId}&&doctorId=${doctorId}`).then(res => {
        doctorList.value = res.data.data;
        console.log('====================================');
        console.log(doctorList.value);
        console.log('====================================');
        time1.value = doctorList.value.dates[0]
        time2.value = doctorList.value.dates[1]
    })
}

const gethospitalList = async () => {
    await http.get(`/registration?id=${hospitalId}`).then(res => {
        hospitalList.value = res.data.data;
    })
}

// 返回上一页
const back = () => {
    router.back();
}


onMounted(() => {
    getDoctorList()
    gethospitalList()
})
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.big {
    width: 100%;
    height: 100vh;
    background-color: #f6f6f6;

    .navigation {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;

        .icon {
            margin: 0 20px;

            img {
                width: 50px;
                height: 50px;
                border-radius: 27.5px;
            }
        }

        .title {
            font-size: 40px;
        }
    }

    main {
        width: 100%;
        padding: 0 20px;
        padding-top: 50px;

        .information {
            width: 100%;
            // height: 200px;
            margin-top: 20px;
            // padding: 15px 20px;
            padding-top: 60px;
            padding-bottom: 0;
            background-color: #fff;
            position: relative;
            border-radius: 10px;

            .picture {
                position: absolute;
                top: -60px;
                left: 20px;
                width: 120px;
                height: 120px;
                border-radius: 60px;
            }

            .name {
                width: 100%;

                h3 {
                    font-size: 40px;
                    letter-spacing: 4px;
                    padding: 0 20px;

                    span {
                        font-weight: normal;
                        font-size: 25px;
                        letter-spacing: 1px;
                        display: inline-block;
                        margin: 0 10px;
                    }
                }

                p {
                    line-height: 50px;
                    padding: 0 20px;
                    color: #5c5c5c;
                }

                .strong {
                    padding: 0 20px;
                    display: flex;
                    justify-content: space-between;

                    i {
                        width: 21%;
                        padding-top: 8px;
                    }
                }

                .official {
                    width: 100%;
                    height: 60px;
                    background-color: #f8fcfb;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 20px;
                    border-radius: 0 0 10px 10px;

                    span {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        img {
                            width: 25px;
                            height: 25px;
                        }
                    }
                }
            }
        }

        .outpatient {
            width: 100%;
            height: 500px;
            background-color: #fff;
            margin-top: 20px;
            border-radius: 10px;
            padding-top: 15px;

            .outpatient-t {
                display: flex;
                justify-content: space-between;

                .left {
                    width: 6%;
                    height: 120px;
                    text-align: center;
                    writing-mode: vertical-rl;
                    text-orientation: mixed;
                    background-color: #18bb8c;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    border-radius: 0 8px 8px 0;
                }

                .right {
                    width: 90%;

                    h2 {
                        line-height: 70px;

                        span {
                            float: right;
                            margin-right: 15px;
                            font-weight: normal;
                            color: #939393;
                        }
                    }

                    p {
                        line-height: 50px;

                        span {
                            // margin-right: 10px;
                            display: inline-block;
                            height: 40px;
                            padding: 0 10px;
                            margin-right: 10px;
                            border: 1px solid #8d8b8c;
                            color: #8d8b8c;
                            text-align: center;
                            line-height: 40px;
                        }
                    }
                }
            }

            .outpatient-m {
                width: 100%;

                h4 {
                    width: 100%;
                    line-height: 70px;
                    text-indent: 40px;
                    position: relative;

                    &::after {
                        content: '';
                        position: absolute;
                        left: 12%;
                        bottom: 0;
                        width: 50px;
                        height: 4px;
                        background-color: #18bb8c;
                    }
                }

                .free {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;

                    .free-l {
                        width: 7%;
                        height: 200px;
                        writing-mode: vertical-rl;
                        text-orientation: mixed;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        letter-spacing: 14px;
                        background-color: #e5f8f4;
                        color: #18bb8c;
                    }

                    .free-r {
                        flex: 1;
                        display: flex;
                        flex-direction: column;

                        div {
                            width: 100%;
                            height: 49.2%;
                            border: 1px solid #ccc;
                            border-left: 0;
                            border-right: 0;
                            padding: 0 20px;

                            h5 {
                                line-height: 50px;
                                font-size: 30px;
                            }

                            p {
                                line-height: 50px;
                                font-size: 28px;
                                color: #939192;
                            }
                        }
                    }
                }
            }

            .prompt {
                line-height: 90px;
                text-indent: 40px;
                color: #9a9a9a;
            }
        }
    }
}
</style>
